<!--成都酒店评分-->
<template>
  <div>
    <!--顶部导航栏-->
    <Header></Header>
    <div class="wrapper">
      <!-- 路径导航 -->
      <PathNavigation :pathnav="content"></PathNavigation>
      <!-- 酒店筛选搜索 -->
      <HotelSearch :hotersear="content" @query="query"></HotelSearch>
      <!-- 信息+地图 -->
      <HotelArea :area="content"></HotelArea>
      <!-- 酒店信息 -->
      <HotelInformation :information="content" @priceStr="filter" @psort="psort"></HotelInformation>
      <!-- 酒店评分 -->
      <HotelRating :rat="list" @page="page"></HotelRating>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "@/components/index/Header.vue";
import PathNavigation from "@/components/hotel/PathNavigation.vue";
import HotelSearch from "@/components/hotel/HotelSearch.vue";
import HotelArea from "@/components/hotel/HotelArea.vue";
import HotelInformation from "@/components/hotel/HotelInformation.vue";
import HotelRating from "@/components/hotel/HotelRating.vue";
import Footer from "@/components/index/Footer.vue";
export default {
  components: {
    Header,
    PathNavigation,
    HotelSearch,
    HotelArea,
    HotelInformation,
    HotelRating,
    Footer
  },
  data() {
    return {
      condition:{
        keyword:'',
        priceStr:'',
        psort:'',
        curPage:'',
      },
      list: {
        ratings: [
          {
            pic:
              "https://b1-q.mafengwo.net/s10/M00/01/36/wKgBZ1mU3gWAZfUKAAWgBf1_Zuw75.jpeg?imageMogr2%2Fthumbnail%2F%21660x480r%2Fgravity%2FCenter%2Fcrop%2F%21660x480%2Fquality%2F90",
            title: "成都钓鱼台精品酒店",
            href1: "/reserve/Reserve",
            titleeg: "Diaoyutai Boutique Hotel Chengdu",
            addree: "宽巷子38-39号",
            num1: 8.9,
            num2: 364,
            num3: 5,
            price1: 1831,
            price2: 1606,
            price3: 1694,
            price4: 1873,
            price5: 1867
          }
        ]
      },
      content: {
        num: 13231,
        address: "中国",
        reserve: "成都酒店预订",
        nainiang:"",
        price1: 242,
        price2: 357,
        items: [
          {
            dataid: "46549",
            address: "春熙路",
            figure: "28%",
            some: "4142",
            hreflangs:"#",
            content: "春熙路位于成都市锦江区春熙路街道。面积大约20公顷。春熙路热闹繁华，被业内誉为中国特色商业街。"
          },
          {
            dataid:"30",
            address: "文殊院",
            figure: "10%",
            some: "1919",
            hreflangs:"#",
            content: "文殊院附近能找到好多好吃的小店。地铁1号线及多条公交路线从这经过，交通便利。这里有不少青旅和经济型酒店，适合预算不高的蜂蜂。"
          },
          {
            dataid: "28",
            address: "天府广场",
            figure: "12%",
            some: "749",
            hreflangs:"#",
            content: "本区是成都最繁华的商圈，吃饭、购物、娱乐应有尽有。这里商场林立，美女也常在此扎堆出现。地铁一、二号线在此交会，交通十分便利。"
          },
          {
            dataid: "33",
            address: "金沙、一品天下",
            figure: "4%",
            some: "1224",
            hreflangs:"#",
            content: "“一品天下”是代表成都美食文化的美食街，集各地美食于一体。这里还有成都欢乐谷和展示古蜀文化的金沙遗址博物馆。离市区有些距离，游客通常很少住这里。"
          },
          {
            dataid: "2610",
            address: "双流机场及周边",
            figure: "6%",
            some: "1166",
            hreflangs:"#",
            content: "双流国际机场距离市中心只有20km左右，交通也很方便。住宿以中等价位的商务酒店为主。成都值得住的地方很多，不赶飞机的蜂蜂不建议住这里。"
          },
          {
            dataid: "1881",
            address: "锦里、武侯祠",
            figure: "9%",
            some: "1485",
            hreflangs:"#",
            content: "成都著名的景点武侯祠、锦里都位于这里。本区交通便利，在锦里逛完吃完可以走着去武侯祠。这一带分布有不少青旅和平价酒店。"
          },
          {
            dataid: "11544",
            address: "成都东站",
            figure: "1%",
            some: "812",
            hreflangs:"#",
            content: "是成都城际动车和高速动车的主要始发终到站。通有地铁2号线和多条公交线路，交通方便。从东站乘城际高铁只要1个多小时就能到峨眉山。"
          },
          {
            dataid: "0",
            address: "其他",
            hreflangs:"#",
          },
          {
            title: "成都是美女的摇篮，大熊猫的故乡，也是吃货的天堂。"
          },
          {
            title: "在成都就是要享受闲适的慢生活，要慢慢看、慢慢逛、慢慢吃。"
          },
          {
            title: "在这里不要错过正宗的川剧变脸，还有美味的火锅和串串。"
          }
        ],
        tab: [
          { id: 0, tabtitle: "全部" },
          { id: 1, tabtitle: "住文艺旅舍" },
          { id: 2, tabtitle: "网红民宿榜" },
          { id: 3, tabtitle: "吃货根据地" },
          { id: 4, tabtitle: "住在文殊院" },
          { id: 5, tabtitle: "老成都院落" },
          { id: 6, tabtitle: "温泉度假" }
        ]
      }
    }
  },
  mounted() {
    this.reserve();
    this.query(this.$route.query.keyword)
  },
  methods: {
    reserve() {
      // eslint-disable-next-line no-undef
      if (typeof M !== "undefined" && typeof M.loadResource === "function") {
        // eslint-disable-next-line no-undef
        M.loadResource("https://js.mafengwo.net/js/cv/js+Dropdown:js+pageletcommon+pageHeadUserInfoWWWNormal:js+jquery.tmpl:js+M+module+InputListener:js+M+module+SuggestionXHR:js+M+module+DropList:js+M+module+Suggestion:js+M+module+MesSearchEvent:js+SiteSearch:js+AHeader:js+jquery.jgrowl.min:js+hotel+mfwmap+mfwmap-util:js+hotel+mfwmap+mfwmap-event:js+hotel+mfwmap+mfwmap-runtime-google:js+hotel+mfwmap+mfwmap-runtime-amap:js+hotel+mfwmap+mfwmap-runtime-leaflet:js+hotel+mfwmap+mfwmap:js+hotel+mfwmap+mfwmap-overlays:js+hotel+module+ListTips:js+M+module+Storage:js+hotel+module+Log:js+hotel+module+Search:js+hotel+module+ModuleProvider:js+hotel+module+Captcha:js+hotel+module+Dialog:js+hotel+module+Hash:js+xdate:js+hotel+module+BookingDate:js+hotel+module+BookingGuests:js+hotel+list_mvc_model:js+corelib+handlebars-2.0.0:js+hotel+module+FestivalDateConfig:js+jquery-ui-core:js+jquery-ui-datepicker:js+hotel+module+DateRangePicker:js+hotel+module+NumberGuestsPicker:js+hotel+list_mvc_filter_view:js+jquery.scrollTo:js+M+module+dialog+Layer:js+M+module+dialog+DialogBase:js+M+module+dialog+Dialog:js+M+module+dialog+alert:js+hotel+module+FavDialog:js+hotel+list_mvc_data_view:js+hotel+list_v6:js+hotel+pc_app_guide:js+M+module+PageAdmin:js+M+module+Cookie:js+M+module+ResourceKeeper:js+AMessage:js+M+module+FrequencyVerifyControl:js+M+module+FrequencySystemVerify:js+ALogin:js+M+module+ScrollObserver:js+M+module+QRCode:js+AToolbar:js+ACnzzGaLog:js+ARecruit:js+ALazyLoad^YlFSRQ^1584071349.js");
      }
    },queryList:function () {   //查询信息
      let keyword = this.condition.keyword;
      let priceStr=this.condition.priceStr;
      let psort=this.condition.psort;
      let curPage=this.condition.curPage;
      const _this = this;
      if (keyword != null && keyword !== "") {
        this.$axios.get(this.SEARCH + '/hotel/search?keyword=' + keyword+"&priceStr="+priceStr+"&psort="+psort+"&curPage="+curPage)
                .then(function (resp) {
          _this.list.ratings = resp.data["data"].list;
          _this.content.num = resp.data["data"].count;
          _this.content.nainiang=resp.data["data"].keyword;
          _this.content.psort=resp.data["data"].psort;
          _this.content.curPage=resp.data["data"].curPage;
        })
      }
    },query(keyword) {    //关键字搜索
      this.condition.keyword = keyword;
      this.queryList();
    },filter(priceStr) {  //价格筛选
      this.condition.priceStr = priceStr;
      this.queryList();
    },psort(){   //价格排序
      let psort=this.condition.psort;
      if (psort !== "1") {
        psort = "1";
      } else {
        psort = "2";
      }
      this.condition.psort=psort;
      this.queryList();
    }
  }
};
</script>

<style scoped>
.wrapper {
  width: 1000px;
  margin: 0 auto;
}
</style>
